<template>
  <view class="page">
    <view class="header-images">
      <view class="uni-margin-wrap">
        <swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
          <swiper-item v-for="item in storeInfo.sliderImageArr" :key="item.id">
            <view class="swiper-item uni-bg-red">
              <image class="swiper-item-image" :src="item" mode="heightFix"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!--      <view v-if="!showSwiper" class="swiper">-->
      <!--        <image class="swiper-item-image" src="/static/images/goods.png" mode="heightFix"></image>-->
      <!--      </view>-->

      <!--      <view class="header-controller" @click="showSwiper = !showSwiper">-->
      <!--        <view class="swiper-btn" :class="{ active: showSwiper }">实物图1/3</view>-->
      <!--        <view class="swiper-btn" :class="{ active: !showSwiper }">素材图</view>-->
      <!--      </view>-->
    </view>

    <view class="good-info">
      <view class="good-price">
        <view class="price-now">￥{{ storeInfo.price }}</view>
        <view class="price">素材价￥{{ storeInfo.designPrice }}</view>
        <view class="score">
          <view class="num">10分</view>
          <view class="score-xin">
            <wd-rate :modelValue="5" size="12px" space="10rpx" />
          </view>
        </view>

        <view class="sales"> 销量 {{ storeInfo.sales }} </view>
      </view>

      <view class="good-name">{{ storeInfo.storeName }}</view>
      <view class="good-tags">
        <view class="tag" v-for="item in storeInfo.keyword?.split(',')">{{ item }}</view>
      </view>
      <view class="detail"> {{ storeInfo.storeInfo }}</view>
    </view>

    <view class="designer" style="padding: 0 16rpx">
      <Designer :show-good="false" :designer="storeInfo.designerInfoVo"></Designer>
    </view>

    <view class="rating-content" v-if="replyData.data">
      <view class="rating-header">
        <div class="rating-name">评价({{replyConfig.sumCount || 0}})</div>
        <div class="rating-btn" @click="bindGORating()">查看详情</div>
      </view>
      <view class="rating-ul">
        <RatingItem v-for="item in replyData.data" :key="item.id" :rating="item" ></RatingItem>
      </view>
    </view>

    <view class="rating-content heat-content">
      <view class="rating-header">
        <div class="rating-name">热门同款</div>
        <div class="rating-btn" @click="bindGOMore()">查看更多</div>
      </view>
      <view class="good-ul">
        <HeatGood v-for="(item, index) in hotGoods" :key="index" :good="item"></HeatGood>
      </view>
    </view>

    <view class="footer acea-row row-between-wrapper" style="display: flex; align-items: center; gap: 30rpx">
      <view class="item" @click="setCollect" v-if="storeInfo.userCollect">
        <image src="https://cos.aitshirt.cn/app-icon/shoucansh.png" class="item-image"></image>
        <text>喜欢</text>
      </view>
      <view class="item" @click="setCollect" v-if="!storeInfo.userCollect">
        <image src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201969%402x.png" class="item-image"></image>
        <text>喜欢</text>
      </view>
      <view class="item">
        <button open-type="contact" class="contacButton" plain="true" hover-class="none">
          <view class="item">
            <image src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202318%402x.png" class="item-image"></image>
            <text>客服</text>
          </view>
        </button>
      </view>
      <!--      v-if="animated"-->
      <view @click="goShoppingCart()" class="item animated bounceIn" style="position: relative">
        <image src="https://cos.aitshirt.cn/app-icon/%E8%B4%AD%E7%89%A9%E8%BD%A6%20%281%29%402x.png" class="item-image"></image>
        <text class="num bg-color-red" style="position: absolute; top: 0; right: 0; min-width: 24rpx; min-height: 24rpx; border-radius: 24rpx; background: #f25a27" v-if="CartCount > 0">{{ CartCount }}</text>
        <text>购物车</text>
      </view>

      <view class="bnt acea-row">
        <view class="joinCart" @click="joinCart()">
          <text>加入购物车</text>
        </view>
        <view class="buy" @click="tapBuy()">
          <text>立即购买</text>
        </view>
      </view>
    </view>

    <!-- 优惠券 -->
    <CouponPop @changeFun="changeFun" :coupon="coupon"></CouponPop>
    <!-- 商品规格弹窗 -->
    <ProductWindow :isIntegral="isIntegral" @changeFun="changeFun" :attr="attr" :cartNum="cart_num"></ProductWindow>
    <!-- 分享海报 -->
    <StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus" :posterData="posterData" :goodId="id"></StorePoster>
    <!-- 分享弹窗 -->
    <ShareInfo v-on:setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></ShareInfo>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getProductDetail, postCartAdd, getCartCount, getProductCode, getReplyList, getReplyConfig } from "@/api/store";
import { getCoupon, getCollectAdd, getCollectDel, getUserInfo } from '@/api/user';
import cookie from '@/utils/store/cookie';
import { isWeixin, handleQrCode, handleUrlParam, getCurrentPageUrlWithArgs, _router } from '@/utils/oldIndex';
import { useAuthStore } from '@/state/modules/user';
import CouponPop from '@/components/CouponPop.vue';
import ProductWindow from '@/components/ProductWindow.vue';
import StorePoster from '@/components/StorePoster.vue';
import ShareInfo from '@/components/ShareInfo.vue';
import Designer from '@/components/designer/Designer.vue';
import RatingItem from '@/components/RatingItem.vue';
import { searchProductData } from '@/api/searchApi';
import HeatGood from '@/components/HeatGood.vue';
const authStore = useAuthStore();
// 定义响应式数据
const shareInfoStatus = ref(false);
const weixinStatus = ref(false);
const mapShow = ref(false);
const mapKey = ref('');
const posterData = reactive({
  image: '',
  title: '',
  price: '',
  code: '',
});
const posterImageStatus = ref(false);
const animated = ref(true);
const coupon = reactive({
  coupon: false,
  list: [],
});
const attr = reactive({
  cartAttr: false,
  productAttr: [],
  productSelect: {},
});
const isOpen = ref(false);
const productValue = ref([]);
const id = ref(0);
const storeInfo = ref({});
const couponList = ref([]);
const attrTxt = ref('请选择');
const attrValue = ref('');
const cart_num = ref(1);
const replyCount = ref('');
const replyChance = ref('');
const reply = ref([]);
const priceName = ref(0);
const CartCount = ref(0);
const posters = ref(false);
const banner = ref([{}, {}]);
const goodList = ref([]);
const systemStore = ref({});
const productConClass = ref('product-con');
const tempName = ref('全国包邮');
const isIntegral = ref(false);
const allData = reactive({});

const hotGoods = ref([]);

const replyData = ref({
  total: 0,
  data: []
})
const replyConfig = ref({sumCount: 0})

// 计算属性
const isLogin = computed(() => authStore.isLogin);
// const location = computed(() => store.getters.location)

// 方法定义
const goHome = () => {
  uni.switchTab('/pages/home/index');
};

const goShoppingCart = () => {
  uni.switchTab({
    url:'/pages/cart/index'
  });
};

const goCustomerList = () => {
  uni.navigateTo({
    url: '/pages/user/CustomerList/index',
  });
};

const goStoreList = () => {
  uni.navigateTo({
    url: '/pages/shop/StoreList/index',
  });
};

const goEvaluateList = (id) => {
  uni.navigateTo({
    url: `/pages/shop/EvaluateList/index?id=${id}`,
  });
};

const telPhone = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber,
    fail() {
      console.log('取消拨打');
    },
  });
};

const showChang = (data) => {
  uni.navigateTo({
    url: `/pages/map/index?${Object.keys(data)
      .map((key) => `${key}=${data[key]}`)
      .join('&')}`,
  });
};

const setShareInfoStatus = () => {
  shareInfoStatus.value = !shareInfoStatus.value;
  posters.value = false;
};

const shareCode = () => {
  getProductCode(id.value).then((res) => {
    posterData.code = res.data.code;
    listenerActionSheet();
  });
};

const setPosterImageStatus = () => {
  posterImageStatus.value = !posterImageStatus.value;
  posters.value = false;
};

// 产品详情接口
const productCon = () => {
  uni.showLoading({
    title: '加载中',
    mask: true,
  });

  return getProductDetail(id.value, { latitude: '', longitude: '' })
    .then((res) => {
      allData.value = res.data;
      res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"');
      storeInfo.value = res.data.storeInfo;
      attr.productAttr = res.data.productAttr;
      productValue.value = res.data.productValue;
      replyCount.value = res.data.replyCount;
      replyChance.value = res.data.replyChance;
      reply.value = res.data.reply ? [res.data.reply] : [];
      priceName.value = res.data.priceName;
      tempName.value = res.data.tempName;
      posterData.image = storeInfo.value.image;

      if (storeInfo.value.storeName.length > 30) {
        posterData.title = storeInfo.value.storeName.substring(0, 30) + '...';
      } else {
        posterData.title = storeInfo.value.storeName;
      }

      posterData.price = storeInfo.value.price;
      posterData.code = storeInfo.value.codeBase;
      systemStore.value = res.data.systemStore;

      let good_list = res.data.goodList || [];
      let goodArray = [];
      let count = Math.ceil(good_list.length / 6);

      for (let i = 0; i < count; i++) {
        var list = good_list.slice(i * 6, 6);
        if (list.length)
          goodArray.push({
            list: list,
          });
      }

      mapKey.value = res.data.mapKay;
      goodList.value = goodArray;
      updateTitle();
      DefaultSelect();
      getCartCountFn();

      searchProductData({
        orderBy: 'order',
        page: 1,
        limit: 10,
        keyword: storeInfo.value.keyword,
      }).then((hotRes) => {
        hotGoods.value = hotRes.data;
      });
      getReplyList(id.value).then((replyRes) => {
        console.log({ replyRes });
        replyData.value = replyRes;
      });
      getReplyConfig(id.value).then((replyRes) => {
        replyConfig.value = replyRes.data;
      })
    })
    .catch((err) => {
      uni.showToast({
        title: err.msg || err.response.data.msg || err.response.data.message,
        icon: 'none',
        duration: 2000,
      });
    })
    .finally(() => {
      uni.hideLoading();
    });
};

// 默认选中属性
const DefaultSelect = () => {
  let productAttr = attr.productAttr;
  let value = [];

  for (let i = 0; i < productAttr.length; i++) {
    productAttr[i].index = 0;
    value.push(productAttr[i].attrValueArr[0]);
  }

  // sort();排序函数:数字-英文-汉字；
  let productSelect = productValue.value[value.sort().join(',')];

  if (productSelect && productAttr.length) {
    attr.productSelect.store_name = storeInfo.value.storeName;
    attr.productSelect.image = productSelect.image;
    attr.productSelect.price = productSelect.price;
    attr.productSelect.stock = productSelect.stock;
    attr.productSelect.unique = productSelect.unique;
    attr.productSelect.integral = productSelect.integral;
    attr.productSelect.cart_num = 1;
    attrValue.value = value.sort().join(',');
    attrTxt.value = '已选择';
  } else if (!productSelect && productAttr.length) {
    attr.productSelect.store_name = storeInfo.value.storeName;
    attr.productSelect.image = storeInfo.value.image;
    attr.productSelect.price = storeInfo.value.price;
    attr.productSelect.integral = storeInfo.value.integral;
    attr.productSelect.stock = 0;
    attr.productSelect.unique = '';
    attr.productSelect.cart_num = 0;
    attrValue.value = '';
    attrTxt.value = '请选择';
  } else if (!productSelect && !productAttr.length) {
    attr.productSelect.store_name = storeInfo.value.storeName;
    attr.productSelect.image = storeInfo.value.image;
    attr.productSelect.price = storeInfo.value.price;
    attr.productSelect.stock = storeInfo.value.stock;
    attr.productSelect.integral = storeInfo.value.integral;
    attr.productSelect.unique = storeInfo.value.unique || '';
    attr.productSelect.cart_num = 1;
    attrValue.value = '';
    attrTxt.value = '请选择';
  }
};

// 购物车
const ChangeCartNum = (changeValue) => {
  // changeValue:是否 加|减
  // 获取当前变动属性
  let productSelect = productValue.value[attrValue.value];
  // 如果没有属性,赋值给商品默认库存
  if (productSelect === undefined && !attr.productAttr.length) {
    productSelect = attr.productSelect;
  }
  // 无属性值即库存为0；不存在加减；
  if (productSelect === undefined) return;

  let stock = productSelect.stock || 0;
  let num = attr.productSelect;

  if (changeValue) {
    num.cart_num++;
    if (num.cart_num > stock) {
      attr.productSelect.cart_num = stock;
      cart_num.value = stock;
    } else {
      attr.productSelect.cart_num = num.cart_num;
      cart_num.value = num.cart_num;
    }
  } else {
    num.cart_num--;
    if (num.cart_num < 1) {
      attr.productSelect.cart_num = 1;
      cart_num.value = 1;
    } else {
      attr.productSelect.cart_num = num.cart_num;
      cart_num.value = num.cart_num;
    }
  }
};

// 将父级向子集多次传送的函数合二为一；
const changeFun = (opt) => {
  console.log('changeFun', opt);
  if (typeof opt !== 'object') opt = {};
  let action = opt.action || '';
  let value = opt.value === undefined ? '' : opt.value;
  if (action === 'changeattr') {
    changeattr(value);
  } else if (action === 'ChangeCartNum') {
    ChangeCartNum(value);
  } else if (action === 'joinCart') {
    joinCart();
  } else if (action === 'tapBuy') {
    tapBuy();
  }

  // if (action && typeof this.action === 'function') {
  //   this[action](value)
  // }
};

// 打开优惠券插件；
const couponTap = () => {
  coupons();
  coupon.coupon = true;
};

const changecoupon = (msg) => {
  coupon.coupon = msg;
  coupons();
};

const currentcoupon = (res) => {
  coupon.coupon = false;
  coupon.list[res].is_use = true;
};

// 可领取优惠券接口；
const coupons = () => {
  let q = {
    page: 1,
    limit: 20,
  };

  getCoupon(q).then((res) => {
    couponList.value = res.data || [];
    coupon.list = res.data;
  });
};

// 打开属性插件；
const selecAttrTap = () => {
  attr.cartAttr = true;
  isOpen.value = true;
};

const changeattr = (msg) => {
  // 修改了规格
  console.log(msg);
  attr.cartAttr = msg;
  isOpen.value = false;
};

// 选择属性；
const ChangeAttr = (res) => {
  // 修改了规格
  let productSelect = productValue.value[res.value];
  console.log(productSelect);

  if (productSelect) {
    attr.productAttr[res.indexw].index = res.indexn;
    attr.productSelect.image = productSelect.image;
    attr.productSelect.price = productSelect.price;
    attr.productSelect.stock = productSelect.stock;
    attr.productSelect.unique = productSelect.unique;
    attr.productSelect.integral = productSelect.integral;
    attr.productSelect.cart_num = 1;
    attrValue.value = res.value;
    attrTxt.value = '已选择';
  } else {
    attr.productSelect.image = storeInfo.value.image;
    attr.productSelect.price = storeInfo.value.price;
    attr.productSelect.integral = storeInfo.value.price;
    attr.productSelect.stock = 0;
    attr.productSelect.unique = '';
    attr.productSelect.cart_num = 0;
    attrValue.value = '';
    attrTxt.value = '请选择';
  }
};

const bindGORating = () => {
  _router.push({ path: '/pages/order/EvaluateList/EvaluateList', query: { id: id.value } });
};
const bindGOMore = () => {
  _router.push({ path: '/pages/search/search', query: { id: id.value } });
};

// 收藏商品
const setCollect = () => {
  let productId = storeInfo.value.id;
  let category = 'product';
  let type = 'collect';

  if (storeInfo.value.userCollect) {
    getCollectDel(productId, category, type).then(function () {
      storeInfo.value.userCollect = !storeInfo.value.userCollect;
    });
  } else {
    getCollectAdd(productId, category, type).then(function () {
      storeInfo.value.userCollect = !storeInfo.value.userCollect;
    });
  }
};

// 点击加入购物车按钮
const joinCart = () => {
  // 0=加入购物车
  goCat(0);
};

// 加入购物车；
const goCat = (news) => {
  let productSelect = productValue.value[attrValue.value];
  // 打开属性
  if (attrValue.value) {
    // 默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
    attr.cartAttr = !isOpen.value ? true : false;
  } else {
    if (isOpen.value) attr.cartAttr = true;
    else attr.cartAttr = !attr.cartAttr;
  }
  // 只有关闭属性弹窗时进行加入购物车
  if (attr.cartAttr === true && isOpen.value === false) return (isOpen.value = true);
  // 如果有属性,没有选择,提示用户选择
  if (attr.productAttr.length && productSelect === undefined && isOpen.value === true) {
    uni.showToast({
      title: '产品库存不足，请选择其它',
      icon: 'none',
      duration: 2000,
    });
    return;
  }

  let q = {
    productId: id.value,
    cartNum: attr.productSelect.cart_num,
    new: news,
    uniqueId: attr.productSelect !== undefined ? attr.productSelect.unique : '',
  };

  postCartAdd(q)
    .then(function (res) {
      console.log(res);
      isOpen.value = false;
      attr.cartAttr = false;

      if (news) {
        if (!res.data) {
          uni.showToast({
            title: res.msg || res.data.msg || res.data.message,
            icon: 'none',
            duration: 2000,
          });
          return;
        }

        uni.navigateTo({
          url: `/pages/order/orderSubmission/orderSubmission?id=${res.data.cartId}&isIntegral=${isIntegral.value}`,
        });
      } else {
        uni.showToast({
          title: '添加购物车成功',
          icon: 'success',
          duration: 2000,
          complete: () => {
            getCartCountFn(true);
          },
        });
      }
    })
    .catch((error) => {
      console.log(error);
      isOpen.value = false;
      uni.showToast({
        title: error.msg || error.response.data.msg || error.response.data.message,
        icon: 'none',
        duration: 2000,
      });
    });
};

// 获取购物车数量
const getCartCountFn = (isAnima) => {
  if (isLogin.value) {
    getCartCount({
      numType: 0,
    }).then((res) => {
      CartCount.value = res.data.count;
      // 加入购物车后重置属性
      if (isAnima) {
        animated.value = true;
        setTimeout(function () {
          animated.value = false;
        }, 500);
      }
    });
  }
};

// 立即购买；
const tapBuy = () => {
  // 1=直接购买
  goCat(1);
};

const listenerActionSheet = () => {
  if (isWeixin() === true) {
    weixinStatus.value = true;
  }
  posters.value = true;
};

const listenerActionClose = () => {
  posters.value = false;
};

const updateTitle = () => {
  // uni.setNavigationBarTitle({
  //   title: storeInfo.value.storeName
  // });
};

// 生命周期钩子
onLoad((options) => {
  let url = handleQrCode();

  if (!url) {
    url = handleUrlParam(getCurrentPageUrlWithArgs());
  }

  console.log(url, 'url');
  const token = cookie.get('login_status');

  if (url && url.id) {
    id.value = url.id;
    let urlSpread = parseInt(url.spread);
    if (urlSpread) {
      cookie.set('spread', urlSpread);
    }
  } else {
    id.value = options.id;
  }

  isIntegral.value = url.isIntegral == 'true';

  if (!token) {
    productCon();
    return;
  }

  coupons();
  productCon().then((res) => {
    console.log('ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss', res);
  });
});

// 监听器
watch(posterImageStatus, (status) => {
  console.log(status);
  if (status) {
    productConClass.value = 'noscroll product-con';
  } else {
    productConClass.value = 'product-con';
  }
});

// 分享配置
const onShareAppMessage = () => {
  return {
    title: storeInfo.value.storeName,
    imageUrl: storeInfo.value.image,
    path: 'pages/shop/GoodsCon/index?id=' + storeInfo.value.id + '&spread=' + uni.getStorageSync('uid') + '&pageType=good&codeType=routine',
    success(res) {
      uni.showToast({
        title: '分享成功',
      });
    },
    fail(res) {
      uni.showToast({
        title: '分享失败',
        icon: 'none',
      });
    },
  };
};
</script>

<style lang="less">
@import './style';
</style>
<style scoped lang="less">
.page {
  width: 100vw;
  min-height: 100vh;
  background: #f3f7f8;
  padding-bottom: 200rpx;
}

.header-images {
  position: relative;
  width: 100%;
  height: 720rpx;
  .uni-margin-wrap {
  }
  .swiper {
    width: 100%;
    height: 720rpx;
    .swiper-item {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 720rpx;
    }
    .swiper-item-image {
      width: 100%;
      height: 100%;
    }
  }
  .header-controller {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 16rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 208rpx;
    height: 40rpx;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    font-weight: 400;
    font-size: 20rpx;
    color: #222222;
    line-height: 40rpx;
    text-align: center;
    padding: 4px;
    .swiper-btn {
      padding: 0 8rpx;
    }
    .swiper-btn.active {
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
  }
}

.good-info {
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  margin: 16rpx;
  padding: 24rpx 16rpx;

  .good-price {
    display: flex;
    align-items: center;
    gap: 16rpx;
    .price-now {
      height: 52rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #f25a27;
      line-height: 52rpx;
    }
    .price {
      width: 148rpx;
      height: 28rpx;
      background: #f25a27;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-weight: 400;
      font-size: 20rpx;
      color: #ffffff;
      line-height: 28rpx;
      text-align: center;
    }
    .score {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 20rpx;
      color: #666666;
      gap: 12rpx;
    }

    .sales {
      font-weight: 400;
      font-size: 20rpx;
      color: #666666;
    }
  }

  .good-name {
    font-weight: bold;
    font-size: 32rpx;
    color: #222222;
    line-height: 44rpx;
  }

  .good-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4rpx 10rpx;
    .tag {
      font-weight: 400;
      font-size: 28rpx;
      color: #f25a27;
      line-height: 40rpx;
    }
  }
  .detail {
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;
    line-height: 40rpx;
  }
}

.rating-content {
  margin: 16rpx;
  padding: 16rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  .rating-header {
    padding: 16rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .rating-name {
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
      line-height: 40rpx;
    }

    .rating-btn {
      height: 40rpx;
      background: #f3f7f8;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      font-weight: 400;
      font-size: 20rpx;
      color: #222222;
      line-height: 40rpx;
      text-align: center;
      padding: 0 16rpx;
    }
  }

  .rating-ul {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }
}

.good-ul {
  width: calc(100vw - 70rpx);
  display: flex;
  gap: 16rpx;
  overflow: auto;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 156rpx;
  background: #ffffff;
  box-shadow: 0rpx -2rpx 4rpx 2rpx rgba(9, 9, 9, 0.08);
  display: flex;
  align-items: center;
  padding: 0 32rpx;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    //margin: 0 32rpx 0 0;

    .item-image {
      width: 40rpx;
      height: 35rpx;
    }
    .contacButton {
      padding: 0;
      background-color: #fff;
      line-height: 25rpx;
    }
    text {
      font-weight: 400;
      font-size: 20rpx;
      color: #222222;
      line-height: 28rpx;
      text-align: center;
    }
  }
  .bnt {
    display: flex;
    align-items: center;
    gap: 16rpx;
    justify-self: end;
    margin-left: auto;
    .joinCart {
      width: 217rpx;
      height: 72rpx;
      background: #f3f7f8;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 72rpx;
      text-align: center;
    }
    .buy {
      width: 217rpx;
      height: 72rpx;
      background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
      font-size: 28rpx;
      color: #ffffff;
      line-height: 72rpx;
      text-align: center;
    }
  }
}
.contacButton {
  padding: 0;
  width: 40rpx;
}
</style>
